<template>
  <div class="searchContainer">
    <div :class="{ optionsBox: true, isExtend: isExtend }">
      <div
        :class="{ optionItem: true, selected: selectedId == item.value }"
        v-for="(item, index) in regionList"
        :key="index"
        @click="handleItemClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="switchBtn" @click="handleSwitchBtnClick">其他地区</div>
  </div>
</template>

<script>
export default {
  name: "regoinSearchNoCountry",
  data() {
    return {
      regionList: [
        // {
        //   value: "100000",
        //   label: "全国",
        // },
        {
          value: "110000",
          label: "北京",
        },
        { value: "310000", label: "上海" },
        {
          value: "440100",
          label: "广州",
        },
        {
          value: "440300",
          label: "深圳",
        },
        {
          value: "510100",
          label: "成都",
        },
        { value: "500000", label: "重庆" },
        { value: "330100", label: "杭州" },
        { value: "610100", label: "西安" },
        {
          value: "420100",
          label: "武汉",
        },
        {
          value: "320500",
          label: "苏州",
        },
        { value: "410100", label: "郑州" },
        { value: "320100", label: "南京" },
        {
          value: "120000",
          label: "天津",
        },
        { value: "430100", label: "长沙" },
        { value: "441900", label: "东莞" },
        {
          value: "330200",
          label: "宁波",
        },
        { value: "440600", label: "佛山" },
        {
          value: "340100",
          label: "合肥",
        },
        { value: "370200", label: "青岛" },
        {
          value: "530100",
          label: "昆明",
        },
        {
          value: "210100",
          label: "沈阳",
        },
        {
          value: "370100",
          label: "济南",
        },
        {
          value: "320200",
          label: "无锡",
        },
        {
          value: "350200",
          label: "厦门",
        },
        {
          value: "350100",
          label: "福州",
        },
        {
          value: "330300",
          label: "温州",
        },
        {
          value: "330700",
          label: "金华",
        },
        {
          value: "230100",
          label: "哈尔滨",
        },
        {
          value: "210200",
          label: "大连",
        },
        {
          value: "520100",
          label: "贵阳",
        },
        {
          value: "450100",
          label: "南宁",
        },
        { value: "350500", label: "泉州" },
        {
          value: "130100",
          label: "石家庄",
        },
        { value: "220100", label: "长春" },
        { value: "360100", label: "南昌" },
        { value: "441300", label: "惠州" },
        { value: "320400", label: "常州" },
        { value: "330400", label: "嘉兴" },
        { value: "320300", label: "徐州" },
        { value: "320600", label: "南通" },
        { value: "140100", label: "太原" },
        { value: "130600", label: "保定" },
        { value: "440400", label: "珠海" },
        { value: "442000", label: "中山" },
        {
          value: "620100",
          label: "兰州",
        },
        {
          value: "371300",
          label: "临沂",
        },
        { value: "370700", label: "潍坊" },
        { value: "370600", label: "烟台" },
        { value: "330600", label: "绍兴" },
      ],
      selectedId: "110000",
      isExtend: false,
    };
  },
  mounted() {
    this.$emit("onRegionChange", {
      value: "110000",
      label: "北京",
    });
  },
  deactivated() {
    this.selectedId = "";
  },
  beforeDestroy() {
    this.selectedId = "";
  },
  methods: {
    handleItemClick(item) {
      this.selectedId = item.value;
      this.$emit("onRegionChange", item);
    },
    handleSwitchBtnClick() {
      this.isExtend = !this.isExtend;
    },
  },
};
</script>

<style lang="scss" scoped>
.searchContainer {
  display: flex;
  align-items: flex-start;
  max-width: 70vw;
  .optionsBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    // width: 1000px;
    height: 26px;
    overflow: hidden;
    transition: height 0.2s;
    .optionItem {
      color: #555;
      float: left;
      line-height: 1.2;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover {
        background-color: #e2f3ff;

        color: #0b6eff;
      }
    }

    .selected {
      background-color: #e2f3ff;

      color: #0b6eff;
    }
    &.isExtend {
      height: auto;
      transition: height 0.2s;
    }
    @keyframes extend {
      from {
        height: 26px;
      }
      to {
        height: 106px;
      }
    }
  }
  .switchBtn {
    color: #999;
    cursor: pointer;
    line-height: 1.2;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 5px;
    white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
  }
}
</style>
